<template>
  <!--机构与用户管理-->
  <section class="page resource-manage">
    <div class="row">
      <div class="col-span-2 org-tree">
        <el-tree align="left" :data="resourceDataTree" highlight-current :default-expanded-keys="[0]" node-key="id" :props="{label:'name'}" :default-checked-keys="treeDefaultSelection" ref="tree" @node-click="getCheckedNodes"></el-tree>
        <!--        <data-tree @edit="onEdit" @add="onAdd" @delete="onDelete" @select-change="onChange" :props="{title:'name'}"-->
        <!--                   showEdit ref="orgTree" :data="resourceDataTree"></data-tree>-->
      </div>
      <div class="col-span-10">
        <data-form :model="resource" @onSearch="refreshData" :page="pageService">
          <template slot="inputs">
            <el-form-item label="资源id" prop="id">
              <el-input v-model="resource.id"></el-input>
            </el-form-item>
            <el-form-item label="父资源id" prop="parentId">
              <el-input v-model="resource.parentId"></el-input>
            </el-form-item>
            <el-form-item label="资源名称" prop="name">
              <el-input v-model="resource.name"></el-input>
            </el-form-item>
          </template>
        </data-form>
        <data-box :data="resourceData" @onPageChange="refreshData" :page="pageService" ref="data-box">
          <template slot="buttons">
            <el-button @click="dialog.addResource = true">新增资源</el-button>
          </template>
          <template slot="columns">
            <el-table-column label="操作" :min-width="$helper.getOperateWidth(2)">
              <template slot-scope="scope">
                <el-button type="text" @click="dialog.modify=true,resourceObj=scope.row">修改资源</el-button>
                <el-button type="text" @click="deleteResource(scope.row)">删除资源</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="资源名称" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="url" label="路由" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="resoSort" label="排序" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="type" label="资源类型" :formatter="(row) => $filter.dictConvert(row.type,'ResourceType')" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>

            <el-table-column prop="parentName" label="父节点" :min-width="$helper.getColumnWidth(2)">
            </el-table-column>

          </template>
        </data-box>
      </div>
    </div>
    <!--修改资源-->
    <el-dialog title="修改资源" :center="true" :visible.sync="dialog.modify" width="50%" @open="$nextTick(()=>$refs['modify-resource'].refresh(resourceObj))" :close-on-click-modal="false" :close-on-press-escape="false">
      <modify-resource ref="modify-resource" @refreshList="refreshData" @close="dialog.modify = false" :resourceObj="resourceObj" @refresh="refreshData"></modify-resource>
    </el-dialog>
    <!--新增资源-->
    <el-dialog title="新增资源" @close="dialog.addResource = false" :visible.sync="dialog.addResource" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
      <add-resource @close="dialog.addResource=false" @refresh="refreshData" :parentId="parentId"></add-resource>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";

import DataTree from "~/components/common/data-tree.vue";

import { ResourceService } from "~/services/management-service/resource.service";
import AddResource from "~/components/system-manage/resource-manage/add-resource.vue";
import ModifyResource from "~/components/system-manage/resource-manage/modify-resource.vue";
import { CommonService } from "~/utils/common.service";

@Auth(2312)
@Layout("workspace")
@Component({
  components: {
    DataTree,
    AddResource,
    ModifyResource
  }
})
export default class ResourceManage extends Vue {

  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(ResourceService)
  private resourceService: ResourceService

  private resourceData = [];

  private resourceDataTree: any = [];

  private allData;
  private treeDefaultSelection: any = [];
  private parentId: any = "";
  private resource: any = {
    id: "",
    parentId: "",
    icon: "",
    name: "",
    resoSort: "",
    type: "",
    url: ""
  };
  private resourceObj: any = {};
  private dialog: any = {
    modify: false,
    batchRole: false,
    roleAllot: false,
    facility: false,
    batchFacility: false,
    addResource: false,
    editOrganizeFlag: false,
    addOrganizeFlag: false,
    batchLevel: false
  };

  private refresh(formName) {
    this.$nextTick(() => {
      const form: any = this.$refs[formName];
      form.refresh();
    });
  }

  /**
   * 修改机构open事件(获取机构)
   */
  private getOragnize() {
    this.$nextTick(() => {
      const edit: any = this.$refs["edit"];
      edit.refresh();
    });
  }

  private dialogOpen() {
    this.$nextTick(() => {
      const addUser: any = this.$refs["add-dept"];
      // addUser.refresh(this.dept);
    });
  }

  private refreshData() {
    const resourceModelRequest: any = this.resource
    this.resourceService.getResourceAllPage(resourceModelRequest, this.pageService).subscribe(data => {
      this.resourceData = data;
    });



  }

  /**
   * 获取当前树选择项
   */
  private getCheckedNodes(value) {
    console.log(value,'0999999999999')
    this.resource.id = value.id;
    this.resource.parentId = value.parentId;
    this.parentId = value.id;
    this.refreshData();
  }

  private created() {
    this.getResourceAll();
  }

  private mounted() {

  }
  private deleteResource(row) {
    // this.$confirm(`您确定要删除该资源及下级吗？`, '提示', {
    this.$confirm(`危险系数大，不允许使用`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      // this.resourceService.deleteResourceById(row.id)
      //     .subscribe((data) => {
      //         this.$message.success('删除成功');
      //         this.refreshData();
      //     });
    });
  }
  /**
   * 加载资源并加载树
   */
  private getResourceAll() {
    this.resourceService.getResourceAll().subscribe(data => {
      const treeDataTmp = CommonService.generateTreeData(data, {
        keyName: "id",
        parentKeyName: "parentId",
        sortKey: "resoSort"
      });
      treeDataTmp.forEach(e => e.parent = 0)
      const arr = [
        {
          id: -1,
          name: "贷后催收系统4.5",
          parent: 0,
          children: treeDataTmp
        }
      ];
      console.log(arr)
      this.resourceDataTree = arr
    });
  }
}
</script>

<style lang="less" scoped>
.page.resource-manage {
  .col-span-2 {
    padding: 0;
  }

  .add-org {
    padding: 10px 20px;
    text-align: right;
    border-bottom: solid 1px #e4e4e4;
  }

  .org-tree {
    border: solid 1px #e4e4e4;
    min-height: 600px;
  }
}
</style>
